<template>
  <div>
    <div class="header">
      特色课
      <van-icon name="search" />
    </div>
    <div>
      <van-dropdown-menu>
        <van-dropdown-item v-model="value1" :options="option1" />
        <van-dropdown-item v-model="value2" :options="option2" />
        <van-dropdown-item v-model="value2" :options="option3" />
      </van-dropdown-menu>
    </div>
    <div class="shen">
      <div v-for="(item,index) in list" :key="index" class="kc" @click="onClickLeft">
        <p>{{item.title}}</p>
        <p>共点击量</p>
        <van-image width="50" height="50" lazy-load src="https://img01.yzcdn.cn/vant/cat.jpeg" />
        <p>{{item.id}}人报名</p>
        <em>{{item.price}}</em>
      </div>
    </div>
    <div class="div">没有更多了</div>
  </div>
</template>

<script>
import Vue from "vue";
import { DropdownMenu, DropdownItem } from "vant";
Vue.use(DropdownMenu);
Vue.use(DropdownItem);
export default {
  // 组件状态值
  data() {
    return {
      value1: 0,
      value2: "a",
      option1: [
        { text: "分类", value: 0 },
        { text: "新款商品", value: 1 },
        { text: "活动商品", value: 2 },
      ],
      option2: [
        { text: "排序", value: "a" },
        { text: "综合排序", value: "b" },
        { text: "最新", value: "c" },
        { text: "最热", value: "d" },
        { text: "价格从低到高", value: "e" },
        { text: "价格从高到低", value: "f" },
      ],
      option3: [
        { text: "筛选", value: "a" },
        { text: "好评排序", value: "b" },
        { text: "销量排序", value: "c" },
      ],
      list: [],
    };
  },
  // 生命周期
  mounted() {
    this.$axios
      .get("http://120.53.31.103:84/api/app/courseBasis")
      .then((res) => {
        this.list = res.data.data.list;
      });
  },
  // 组件方法
  methods: {
    onClickLeft() {
      this.$router.push("/tj");
    },
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 过滤器
  filters: {},
  // 自定义指令
  directives: {},
};
</script> 

<style scoped>
.header {
  width: 100%;
  height: 35px;
  text-align: center;
  font-size: 20px;
}
.van-icon {
  float: right;
  margin-top: 5px;
}
.shen {
  padding-left: 10px;
  background: #f2f3f5;
  padding-right: 10px;
  padding-top: 10px;
}
.kc {
  width: 100%;
  height: 150px;
  background: white;
  display: flex;
  margin-bottom: 10px;
  flex-direction: column;
  justify-content: space-around;
  margin-top: 10px;
  position: relative;
  border-radius: 10px;
}
p {
  margin: 0 10px;
}
.van-image {
  display: block;
  width: 100%;
  height: 100%;
  margin-left: 10px;
}
em {
  float: right;
  width: 50px;
  position: absolute;
  right: 0;
  bottom: 0;
}
.div {
  width: 100%;
  height: 100px;
  background: #f2f3f5;
  text-align: center;
  line-height: 70px;
  color: #969799;
}
</style>
